<template>
  <div class="order-status-container">
    <h1>订单状态</h1>
    <table>
      <thead>
        <tr>
          <th>订单号</th>
          <th>产品名称</th>
          <th>目的地址</th>
          <th>交易状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="order in paginatedOrders" :key="order.id">
          <td>{{ order.id }}</td>
          <td>{{ order.productName }}</td>
          <td>{{ order.destination }}</td>
          <td>{{ order.status }}</td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button v-for="page in totalPages" :key="page" @click="goToPage(page)">{{ page }}</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderStatus',
  data() {
    return {
      orders: [
        { id: '001', productName: '产品A', destination: '北京', status: '交易成功' },
        { id: '002', productName: '产品B', destination: '上海', status: '交易失败' },
        { id: '003', productName: '产品C', destination: '广州', status: '交易成功' },
        { id: '004', productName: '产品D', destination: '深圳', status: '交易失败' },
        { id: '005', productName: '产品E', destination: '杭州', status: '交易成功' },
        { id: '006', productName: '产品F', destination: '南京', status: '交易失败' },
        { id: '007', productName: '产品G', destination: '成都', status: '交易成功' },
        { id: '008', productName: '产品H', destination: '重庆', status: '交易失败' },
        { id: '009', productName: '产品I', destination: '武汉', status: '交易成功' },
        { id: '010', productName: '产品J', destination: '西安', status: '交易失败' },
        { id: '011', productName: '产品K', destination: '郑州', status: '交易成功' },
        { id: '012', productName: '产品L', destination: '长沙', status: '交易失败' },
        { id: '013', productName: '产品M', destination: '合肥', status: '交易成功' },
        { id: '014', productName: '产品N', destination: '济南', status: '交易失败' },
        { id: '015', productName: '产品O', destination: '太原', status: '交易成功' },
        { id: '016', productName: '产品P', destination: '南昌', status: '交易失败' },
        { id: '017', productName: '产品Q', destination: '贵阳', status: '交易成功' },
        { id: '018', productName: '产品R', destination: '昆明', status: '交易失败' },
        { id: '019', productName: '产品S', destination: '兰州', status: '交易成功' },
        { id: '020', productName: '产品T', destination: '银川', status: '交易失败' }
      ],
      currentPage: 1,
      itemsPerPage: 10,
      totalPages: 4
    };
  },
  computed: {
    paginatedOrders() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.orders.slice(start, end);
    }
  },
  methods: {
    goToPage(page) {
      this.currentPage = page;
    }
  }
}
</script>

<style scoped>
.order-status-container {
  padding: 20px;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
  background-color: #f9f9f9; /* 表格背景色 */
}

th {
  background-color: #4CAF50; /* 表头背景色 */
  color: white; /* 表头文字颜色 */
  padding: 10px;
}

td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

tr:nth-child(even) {
  background-color: #f2f2f2; /* 偶数行背景色 */
}

tr:hover {
  background-color: #ddd; /* 悬停效果 */
}

.pagination {
  margin-top: 10px;
}

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  background-color: #4CAF50; /* 按钮背景色 */
  color: white; /* 按钮文字颜色 */
  border: none;
  cursor: pointer;
}

.pagination button:hover {
  background-color: #45a049; /* 按钮悬停效果 */
}
</style>